<template>
  <div className="container">
    <div className="goods">
      <div className="main" v-for="item in goods.list">
        <div className="imgs">
          <img :src="item.goods_coverImgUrl" alt="" />
        </div>
        <div className="introduce">
          <div className="text">
            {{
              item.content
            }}
          </div>
        </div>
        <div className="content">
          <div className="price">
            <svg
              t="1664707264256"
              class="icon32"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="26866"
              width="14"
              height="14"
            >
              <path
                d="M447.488 764.928l-197.632 0q-27.648-2.048-42.496-23.04t-17.92-46.592q3.072-25.6 17.92-41.984t42.496-18.432l197.632 0 0-64.512-197.632-1.024q-27.648-2.048-42.496-19.456t-17.92-44.032q3.072-25.6 17.92-41.984t42.496-18.432l147.456 0-137.216-241.664q-10.24-12.288-19.456-31.232t-8.192-41.472q5.12-28.672 20.48-46.592t57.344-23.04q24.576 2.048 44.032 16.896t31.744 32.256l155.648 284.672 171.008-286.72q12.288-17.408 31.744-30.72t44.032-16.384q15.36 1.024 28.16 4.096t22.528 10.24 16.384 20.48 9.728 34.816q0 29.696-20.48 56.32l-158.72 258.048 150.528 0q26.624 2.048 41.984 18.432t17.408 41.984q-2.048 26.624-17.92 45.056t-42.496 20.48l-195.584 1.024 0 62.464 196.608 0q26.624 2.048 41.984 20.48t17.408 44.032q-2.048 26.624-17.408 44.544t-41.984 19.968l-196.608-1.024 0 108.544q-4.096 87.04-95.232 87.04-45.056 0-70.144-21.504t-27.136-65.536l0-106.496z"
                p-id="26867"
              ></path>
            </svg>
            <div className="priceSingnal">
              {{ item.goods_price }}
            </div>
          </div>
          <div className="collection">
            <svg
              t="1664707341173"
              class="icon44"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="27790"
              width="20"
              height="20"
            >
              <path
                d="M908.8 214.4c-9.6-12.8-19.2-22.4-28.8-32-112-115.2-230.4-105.6-342.4-16-9.6 6.4-19.2 16-28.8 25.6-9.6-9.6-19.2-16-28.8-25.6-112-86.4-230.4-99.2-342.4 16-9.6 9.6-19.2 19.2-25.6 32-134.4 195.2-60.8 387.2 137.6 560 44.8 38.4 89.6 73.6 137.6 102.4 16 9.6 32 19.2 44.8 28.8 9.6 6.4 12.8 9.6 19.2 9.6 3.2 3.2 6.4 3.2 12.8 6.4 3.2 3.2 9.6 3.2 16 6.4 25.6 6.4 64 3.2 89.6-12.8 3.2 0 9.6-3.2 16-9.6 12.8-6.4 28.8-16 44.8-28.8 48-28.8 92.8-64 137.6-102.4C969.6 598.4 1043.2 406.4 908.8 214.4zM736 732.8c-41.6 35.2-86.4 70.4-131.2 99.2-16 9.6-28.8 19.2-44.8 25.6-6.4 3.2-12.8 6.4-16 9.6-6.4 3.2-16 6.4-25.6 9.6-3.2 0-6.4 0-9.6 0-6.4 0-12.8 0-16 0-3.2 0-3.2 0-3.2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0-3.2 0-3.2-3.2-3.2 0-6.4-3.2-9.6-3.2-3.2-3.2-9.6-6.4-16-9.6-12.8-6.4-28.8-16-44.8-25.6-44.8-28.8-89.6-60.8-131.2-99.2-179.2-160-243.2-323.2-131.2-489.6 6.4-9.6 16-16 22.4-25.6 89.6-96 182.4-86.4 275.2-12.8 9.6 6.4 16 12.8 22.4 19.2 0 0 0 0 0 0l28.8 32c3.2 3.2 3.2 3.2 6.4 6.4 0 0 0 0 0 0l0 0c3.2-3.2 9.6-9.6 16-16 12.8-12.8 25.6-25.6 41.6-38.4 92.8-73.6 185.6-83.2 275.2 12.8 6.4 9.6 16 16 22.4 25.6C982.4 406.4 918.4 572.8 736 732.8z"
                p-id="27791"
              ></path>
            </svg>
          </div>
          <div className="want">
            <el-button type="primary">{{ "我想要" }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { takeAllGoods, takeHomeGoods } from '../../api/goods/index';
import {useRouter, useRoute} from "vue-router"
import {useStore} from "vuex"
import { onMounted, reactive } from 'vue';
const router = useRouter()
const routes = useRoute()
const store = useStore() 
const goods = reactive({
  list:[]
})
const takeGoods = async()=>{
  const params = {
    limit:20,
    offset:0
  }
  const {data:{data:data}} = await takeAllGoods(params)
  goods.list = data
}
onMounted(()=>{
  takeGoods()
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 1400px;
  position: relative;
  margin-top: 61px;
  background-color: #fff;
  &:hover {
    cursor: pointer;
  }
  .goods {
    position: absolute;
    width: 1000px;
    height: 1400px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 10px;
    .main {
      width: 170px;
      height: 290px;
      background-color: #fff;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 0px solid rgba(255, 255, 255, 0.18);
      box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
      -webkit-box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
      position: relative;
      padding: 10px;
      border-radius: 10px;
      .imgs {
        width: 170px;
        height: 190px;
        margin-top: 10px;
        img {
          width: 150px;
          height: 180px;
          margin-left: 10px;
          border-radius: 10px;
          &:hover {
            transform: scale(1.05);
            transition: 0.5s;
          }
        }
      }
      .introduce {
        width: 170px;
        font-size: 12px;
        font-weight: 900;
        border-bottom: 1px dashed #ccc;
        .text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-top: 5px;
        }
      }
      .content {
        width: 170px;
        background-color: #ccc;
        display: flex;
        margin-top: 45px;
        justify-content: space-between;
        position: relative;
        .price {
          display: flex;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 14px;
          font-weight: 900;
          .icon32 {
            position: absolute;
            top: -9px;
            left: -2px;
          }
          .priceSingnal {
            position: absolute;
            top: -13px;
            left: 14px;
          }
        }
        .collection {
          display: flex;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
        .want {
          position: absolute;
          top: 50%;
          left: 63%;
          transform: translate(-50%, -50%);
          .el-button {
            font-size: 14px;
            font-weight: 900;
          }
        }
      }
    }
  }
}
</style>
